<script setup>
import {del, get} from '../../api/http'
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Lock, Plus, Search } from '@element-plus/icons-vue';

const noteList = ref([])
const total = ref(0)
const pageNum = ref(1)
const keyword = ref('')

const getNoteList = () => {
    get('note/admin',{pageNum: pageNum.value, pageSize:10, keyword: keyword.value}).then(res=>{
        if(res.status){
            noteList.value = res.data.list
            total.value = res.data.total
        }else{
            ElMessage({type:'error',message:res.msg})
        }
    })
}

const delNote = (id) => {
    ElMessageBox.confirm('该操作将永久删除该笔记，是否继续？','提示',{confirmButtonText:'确认删除',cancelButtonText:'取消删除',type:'warning'}).then(()=>{
        del('note/admin',[id]).then(res=>{
            ElMessage({type:res.status?'success':'error',message:res.msg})
            if(res.status){
                getNoteList()
            }
        })
    })
}

const handlePageChange = (currentPageNum) => {
    pageNum.value = currentPageNum
    getNoteList()
}

onMounted(()=>{
    getNoteList()
})

</script>
<template>
    <main v-blog-title data-title="笔记管理">
        <div class="toolBar">
            <el-input v-model="keyword" @keydown.enter="getNoteList" clearable @clear="getNoteList" placeholder="输入关键字" style="width: 300px; margin-right:10px;"></el-input>
            <el-button type="primary" :icon="Search" @click="getNoteList">搜索</el-button>
        </div>
        <div class="content">
            <el-table :data="noteList" border>
                <el-table-column label="笔记标题" width="300">
                    <template #default="scope">
                        <span style="font-weight: bold;" v-html="scope.row.noteTitle"></span>
                    </template>
                </el-table-column>
                <el-table-column label="笔记描述">
                    <template #default="scope">
                        <span v-html="scope.row.noteDescribe"></span>
                    </template>
                </el-table-column>
                <el-table-column label="用户名" width="180" align="center" prop="nickName"></el-table-column>
                <el-table-column label="浏览量" width="100" align="center" prop="viewCount"></el-table-column>
                <el-table-column label="状态" width="100" align="center" prop="viewStatus">
                    <template #default="scope">
                        {{ scope.row.viewStatus == 'public' ? '公开' : '私有' }}
                    </template>
                </el-table-column>
                <el-table-column label="创建日期" width="200" align="center" prop="createTime"></el-table-column>
                <el-table-column label="更新日期" width="200" align="center" prop="updateTime"></el-table-column>
                <el-table-column label="操作" align="center" width="180">
                    <template #default="scope">
                        <el-button size="small" type="primary" plain :icon="Edit">编辑</el-button>
                        <el-button @click="delNote(scope.row.id)" size="small" type="danger" plain :icon="Delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination small style="margin: 10px;" background @current-change="handlePageChange" layout="prev, pager, next" :total="total"></el-pagination>
        </div>
    </main>    
</template>
<style scoped>
main{
    margin: 10px;
}
.toolBar{
    margin-bottom: 10px;
}
</style>